<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WebGL Model Viewer Demo</title>
    <script src="js/three.js"> </script>
    <script src="js/TrackballControls.js"> </script>
<script src="js/JSONLoader.js"> </script>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, scene, renderer;

			var projector, raycaster, mouse, points = [];

			var mesh, line;

			init();
			animate();

			function onLoad(){
				initScene();
				function initScene() {

					// Grab our canvas
					var container = document.getElementById("container");
					//Create a new renderer and set the size
					renderer = new THREE.WebGLRenderer( { antialias: true } );
					renderer.setSize(window.innerWidth, window.innerHeight);
					//Add the renderer to the DOM
			        container.appendChild( renderer.domElement );

					//Create a new scene
			        scene = new THREE.Scene();
					
					//Create a perspective camera
			        camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 1000 );
			        camera.position.z = 20;
					
			        scene.add( camera );

			        //Add controls for interactively moving the camera with mouse
			        controls = new THREE.TrackballControls( camera, renderer.domElement );
					controls.rotateSpeed = 1.0;
					controls.zoomSpeed = 1.2;
					controls.panSpeed = 0.2;
				
					controls.noZoom = false;
					controls.noPan = false;
				
					controls.staticMoving = false;
					controls.dynamicDampingFactor = 0.3;
				
					controls.minDistance = 1.1;
					controls.maxDistance = 100;
				
					controls.keys = [ 16, 17, 18 ]; // [ rotateKey, zoomKey, panKey ]
				
					//Add some lights
					var dirLight = new THREE.DirectionalLight(0xffffff, 1);
					dirLight.position.set(-3, 3, 7);
					dirLight.position.normalize();
					scene.add(dirLight);
				
					var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
					pointLight.position.set(10, 20, -10);
					scene.add(pointLight);
			 					
					//Create a new loader for loading the model
					var jsonLoader = new THREE.JSONLoader();

					//TEST
					var redPhongMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000});
				
					//Load a model and store it in the variable XXX
					jsonLoader.load( "models/mariohead.js", function( geometry ) { 
			        var mariohead = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
					mariohead.material=redPhongMaterial;


					//Add the model to the scene
					scene.add(mariohead);
					} );

					//Call the animate function
			 		animate();
			    }
			    
			    function animate() {
        			//will not render if the browser window is inactive
        			requestAnimationFrame( animate );
        			render();
    			}

    			function render() {

					controls.update(); //for cameras
        			renderer.render( scene, camera );
        			
    			}
			}
		</script>
  </head>
 <body onLoad="onLoad();">
  <div id='container'>

  </div>
</body>
</html>
